<template>
    <div class="position">
        <div class="headerList">
            <p @click="onClickLeft" v-show="flag" ><img src="@/assets/list.png"/></p>
            <p>{{$route.name}}</p>
        </div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </keep-alive>
        <van-popup v-model="show" overlay="" position="left" :style="{width:'50%',height:'100%'} ">
            <van-image
                    round
                    width="3rem"
                    height="3rem"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                    @click="myMessage"
            />
            <van-cell is-link v-for="item in station" :key="item.key" :id="item.id" :title="item.name" @click.native="CellClickZX(item)"  />
        </van-popup>
        <down-List v-if="$route.meta.showTab"></down-List>
    </div>
</template>

<script>
    import downList from "../../components/downList/downList";
    export default {
        components:{
            downList,
        },
        data(){
            return{
                show:false,
                markers:[],
                flag:true,
                pageName:"",
                station:[{
                    name:'当前的位置',
                    id:'001',
                    location:[],
                    icon:''
                },
                    {
                        name:'nihao1',
                        id:'002',
                        location:[116.11,39.23],
                        icon:''
                    },
                    {
                        name:'nihao2',
                        id:'003',
                        location:[116.11,39.23],
                        icon:''
                    },
                    {
                        name:'nihao3',
                        id:'004',
                        location:[116.43,39.76],
                        icon:''
                    }]
            }
        },

        methods:{
            myMessage(){
                console.log("点击了头像");
            },

            onClickLeft(){
                this.show=true;
                console.log("点击了侧边栏按钮");

            },
            CellClickZX(item){
                this.markers=[];
                this.center=item.location;
                this.markers.push(item);
                this.Bus.$emit("coordinate",{markers:this.markers,center:this.center})
                this.show=false;
            }
        },
       created() {
           this.Bus.$on("turn",(data)=>{
              this.station[0].location = data
           })
       }
    }
</script>

<style lang="scss" scoped>
.position{
    height: 100%;
}
    .headerList{
        position: sticky;
        position: -webkit-sticky;    // 兼容 -webkit 内核的浏览器
        top: 0;
        height: 7%;
        width: 100%;
        background: #fff;
        left:0;
        img{
            width: 0.5rem;
            height: 0.5rem;
        }
      :nth-child(1){
          position: absolute;
           left: 0.3rem;
          font-size: 0.3rem;
          top:50%;
          margin-top: -3.5%;
          color: #0073eb;
      }
        :nth-child(2){
           position: absolute;
            top:50%;
            left: 47%;
            margin-top: -3.5%;
            font-size: 0.38rem;
        }
    }
</style>